<template>
  <div class="test">
    <div class="search">
      <div class="input">
        <div class="iconfont icon-sousuo"></div>
        <input type="text" @input="handleSearch" v-model="searchInput" placeholder="请输入关键字">
      </div>
      <div class="text">取消</div>
    </div>
    <div class="history" v-if="historyVisible">
      <div class="title">
        <div>搜索历史</div>
        <div class="iconfont icon-shanchu1" @click="handleRemoveHistory"></div>
      </div>
      <div class="content">
        <div class="item" v-for="(item, index) in historyData" :key="index + 'list'" @click="handleResearch(item)">{{ item }}</div>
      </div>
    </div>
    <div class="result_list" v-else>
      <div class="item" v-for="(item, index) in showData" :key="index +'relist'" @click="handleClickResult(item.text)">{{ item.text }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
  setup() {
    const data = [{
      id: 1,
      text: '福田外国语西'
    }, {
      id: 2,
      text: '福777'
    }, {
      id: 3,
      text: '福田外国学校'
    }, {
      id: 4,
      text: '福田第二'
    }, {
      id: 5,
      text: '北京大学'
    }, {
      id: 6,
      text: '深圳大学'
    }, {
      id: 7,
      text: '北京外国语西二'
    }, {
      id: 8,
      text: '9999999'
    }, {
      id: 9,
      text: '江州中学'
    }, {
      id: 10,
      text: '放大镜飞机第四卡发'
    }, {
      id: 11,
      text: '发的啥开发接口的开发进度'
    }, {
      id: 12,
      text: '分解机分解的急急急'
    }, {
      id: 13,
      text: '福田中学'
    }]
    const historyVisible = ref(true)
    const searchInput = ref('')
    const showData = ref([{id: -1, text: ''}])
    const historyData = ref([''])
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const handleSearch = (e: any) => {
      if(e.target.value) {
        showData.value = []
        // console.log(e.target.value);
        showData.value = filterData(e.target.value)
        historyVisible.value = false
        // if(value.detail.value){
				// 	this.historyData.unshift(value.detail.value)
				// 	// 使用Set对历史搜索词汇数组进行去重
				// 	this.historyData = Array.from(new Set(this.historyData))
				// 	this.historyData.length = 10
				// }
				// this.onSearch(value.detail.value)
      } else {
        historyVisible.value = true
      }
      // console.log(historyData.value, '89');
      
    }
    const filterData = (value: string) => {
      const result = data.filter((item) => {
        return item.text.includes(value)
      })
      return result
    }
    const handleClickResult = (value: string) => {
      historyData.value.unshift(value)
      historyData.value = Array.from(new Set(historyData.value))
      localStorage.setItem('history', JSON.stringify(historyData.value))
      console.log(historyData.value, '101');
      historyVisible.value = true
      searchInput.value = ''
    }
    const handleRemoveHistory = () => {
      historyData.value = []
      localStorage.removeItem('history')
    }
    const handleResearch = (value: string) =>{
      searchInput.value = value
      showData.value = filterData(value)
      historyVisible.value = false
    }
    onMounted(() => {
      showData.value = []
      historyData.value = []
      if(localStorage.getItem('history')) {
        historyData.value = JSON.parse(localStorage.getItem('history') as string)
      }
    })
    return {
      data,
      searchInput,
      showData,
      historyVisible,
      historyData,
      handleSearch,
      handleClickResult,
      handleRemoveHistory,
      handleResearch
    }
  }
})
</script>

<style scoped>
  .test {
    font-family: none;
    margin: 10px 4%;
  }
  .test .search {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .test .search .input {
    position: relative;
    width: 80%;
  }
  .test .search .text {
    height: 30px;
    line-height: 30px;
  }
  .test .search .input input {
    border: none;
    border-radius: 14px;
    background-color: rgb(246,246,246);
    height: 30px;
    padding-left: 36px;
    width: 90%;
  }
  .test .search .input .iconfont {
    position: absolute;
    top: 30%;
    left: 12px;
  }
  .history {
    padding: 10px 0;
  }
  .history .title {
    display: flex;
    justify-content: space-between;
    padding: 0 0 10px;
  }
  .history .title .iconfont {
    cursor: pointer;
  }
  .history .content {
    display: flex;
    flex-wrap: wrap;
  }
  .history .content .item {
    height: 30px;
    line-height: 30px;
    padding: 0 18px;
    background-color: rgb(246,246,246);
    margin: 10px 10px 0 0;
    border-radius: 14px;
    cursor: pointer;
  }
  .result_list .item {
    height: 50px;
    line-height: 50px;
    text-align: left;
    border-bottom: 1px #efefef solid;
  }
</style>